<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			.box1{
				/**
				 * 用width设置盒子内容区的宽度
				 * 用height设置盒子的内容区高度
				 * width和height只是设置内容区的宽高，而不是整个盒子的大小
				 * 盒子可见框的大小有内容区，内边距和边框共同决定
				 */
				width: 100px;
				height: 100px;
				
				background-color: beige;
				
				/**
				 * 为元素设置边框
				 *	要为一个元素设置边框必须指定三个样式
				 *  border-width:边框宽度，有border-style时默认值3px
				 *	border-color:边框颜色，默认值黑色
				 *	border-style:边框样式，默认值none
				 */
				
				/**
				 * 如果border-width指定了四个值，则四个值分别是上右下左，顺时针设置
				 * 如果border-width指定了三个值，上 左右 下
				 * 如果border-width指定了两个值，上下 左右
				 * 如果border-width指定了一个值，上下左右
				 *
				 * 除了border-width，还有四个border-xx-width,xx为：top,right,bottom,left
				 */
				/* border-width: 10px 20px 30px 40px; */
				/* border-width: 10px; */
				/**
				 * 同理，boder-color也一样可以分别设置四个边
				 */
				/* border-color: blue red orange orange; */
				/**
				 * 常用
				 * none,默认值，没有边框
				 * solid 实线
				 * dotted 点状边框
				 * dashed 虚线
				 * double 双线
				 * 同理，boder-style也一样可以分别设置四个边
				 */
				/* border-style: solid; */
				
				/**
				 * border
				 * 边框的简写样式，通过它可以同时设置四个边框的样式，没有任何顺序要求
				 * border一指定，就是同时指定四个边
				 * border-xxx,	top,right,bottom,left可以单独指定1个边样式
				 */
				border: #0000FF solid 10px;
				
				/**
				 * 设置内边距（padding）指的是，盒子的内容区与盒子边框之间的距离
				 * 一共有四个方向的内边距
				 * padding-xxx,top,right,bottom,left
				 * padding:top right bottom left 规则和border-width一样
				 *
				 * 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
				 * 盒子的大小，由内容区，内边距和边框共同决定
				 * 盒子的可见宽度 = border-left-width + padding-left + width + padding-right + border-right-width
				 * 盒子的可见高度 = border-top-width + padding-top + heitht + padding-bottom + border-bottom-width
				 */
				padding: 10px 10px 10px 10px;
				
				/**
				 * 外边距指当前盒子与其他盒子之间的距离
				 * 不会影响盒子可见框大小，而是会影响到盒子的位置
				 * 一共有四个方向的外边距
				 * margin-xxx,top,right,bottom,left
				 * margin:top right bottom left 规则和border-width一样
				 * 
				 * 由于页面中的元素都是靠左靠上摆放的
				 * 所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变
				 * 而如果是设置右和下外边距，会改变其他盒子的位置
				 *
				 * 外边距也可以设置负值 （可以实现叠加效果）
				 * 
				 */
				margin-top: 20px;
				margin-bottom: 30px;
				
				/**
				 * margin还可以设置为auto，auto一般只设置给水平方向的margin
				 * 如果只指定左或右的margin为auto，则会将外边距设置为最大值
				 *
				 * 如果将left和right同时设置为auto，则会将两侧外边距设置为相同的值,就可以使元素自动在父元素中居中
				 * 所以我们经常将左右外边距设置为auto，以使子元素在父元素中居中显示
				 */
				margin-left: auto;
				margin-right: auto;
			}
			
			.content{
				width: 100%;
				height: 100%;
				background-color: green;
				color: aliceblue;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: aqua;
				
				border: brown solid 20px;
				
				/**
				 * 垂直外边距的重叠
				 * -当为上边的元素设置下边距后，下边的元素再设置上边距，则会出现边距的重叠
				 *  所谓外边距重叠，指兄弟元素之间的相邻外边距回去最大值而不是取和
				 * -如果父子元素垂直外边距相邻了，则给子元素设置垂直外边距时，其实是设置给父元素
				 */
				margin-top: 50px;
			}
			
			/**
			 * 内联元素
			 * 内容区，内边距，边框，外边距

				-内联元素，不能设置width和height

				-内联元素可以设置水平内边距，padding-left和padding-right,可以影响布局，

				也可以设置垂直方向内边距，padding-top和padding-bottom，但是不会影响页面布局。

				-水平方向的边框也是一样，可以影响布局，垂直方向的不会影响布局

				-支持水平方向的外边距，不会重叠，而是累加求和，不支持垂直方向的外边距。
			 */
			.s1{
				background-color: #BBFFAA;
				padding-top: 50px;
			}
			.s2{
				background-color: #008000;
				margin-top: 100px;
				margin-left: 50px;
			}
			
			/* 有border-style，不写宽度，默认3px */
			.box3{
				border: #016999 solid;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="content">
				这里是内容区域
			</div>
		</div>
		
		<div class="box2">
			这是box2
		</div>
		
		<span class="s1">我是span s1</span>
		<span class="s2">我是span s2</span>
		
		<div class="box3">
			这是box3
		</div>
	</body>
</html>
